<!--批量修改值-->
<template>
  <el-dialog :title="title" :visible.sync="visible" :width="width" :close-on-click-modal='false' class="bonus">
    <el-row>
      <el-form :model="formData" ref="formRef"   v-loading="formLoading" :close-on-click-modal="false">
        <el-col :span="24">
          <el-form-item label="改值的列名" :label-width="labelWidth" prop="columnName"  :rules="[{required:true,message:'请选择',trigger:'change'}]" >
            <el-select v-model="formData.columnName" placeholder="请选择" clearable class="w100"
                       @change="computeChange">
              <el-option v-for="(item,index) in computeOptions " :key="index" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <div class="flex">
            <span class="text-label">批量修改值</span>
            <el-table class="edit-table" :data="formData.tableData" v-loading="loading" border>
              <el-table-column
                width="60px"
                prop=""
                label="序号"
                align="center"
              >
                <template slot-scope="scope">
                  {{scope.$index + 1}}
                </template>
              </el-table-column>
              <el-table-column prop="oldRatio" label="旧值" align="center" header-align="center" ></el-table-column>
              <el-table-column prop="ratio" label="新值" align="center" header-align="center" >
                <template v-slot="scope" >
                  <el-form-item :prop="`tableData.${scope.$index}.ratio`" :rules="[{validator:$validateUtil.dynamic,prop:'ratio',row:scope.row,ruleType:''}]">
                    <el-input-number  :controls="false" v-model.trim="scope.row.ratio" placeholder="请输入" class="w100"></el-input-number>
                  </el-form-item>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-col>
      </el-form>
    </el-row>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel(false)">取消</el-button>
      <el-button type="primary"  @click="handleSubmit">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>

import {getValuesOfColumn, saveBatchModifyValues} from "@/api/bonus/common";
import {getDic} from '@/api/bonus/common'
export default {
  name: "addForm",
  components:{

  },
  props:{

  },
  created() {
  },
  data(){
    return{
      type:'jg',
      formLoading:false,
      loading:false,
      title:'批量调整每列的值',
      width:'30%',
      labelWidth:'110px',
      visible: false,
      formData: {columnName:'',tableData:[]},
      computeOptions:[],
    }
  },
  methods:{
    init(type,computeSubId){
      this.type = type  //type => jg | ry
      //方案因素字典
      this.getComputeOptions() ;
      this.computeSubId = computeSubId
      this.visible = true ;
    },
    getComputeOptions(){
      let code = '' ;
      if (this.type == 'jg'){
        code = 'bonus_dept_compute' ;
      }else{
        code = 'bonus_person_compute' ;
      }
      getDic(code).then(res=>{
         this.computeOptions = res.data.data
      }).catch(err=>{
      })
    },
    computeChange(val){
      if (!val){
        this.formData.columnName = ''
        this.formData.tableData = []
        return
      }
      this.getValuesOfColumn()
    },
    getValuesOfColumn() {
      this.loading = true ;
      getValuesOfColumn(this.type,this.computeSubId,this.formData.columnName).then(res=>{
        if (res.data.code == 0){
          this.formData.tableData = []
          res.data.data.map(item=>{
            item['oldRatio'] = item.ratio
            this.formData.tableData.push(item)
          })
         }
        this.loading = false;
      }).catch(err=>{
        this.loading = false;
      })
    },
    handleSubmit(){
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          this.formLoading = true ;
          saveBatchModifyValues(this.type,this.formData.tableData).then(res=>{
            this.formLoading = false ;
            this.handleCancel(true) ;
          }).catch(()=>{
            this.formLoading = false ;
          })

        } else {
          return false;
        }
      });
    },
    handleCancel(refresh){
      this.visible = false ;
      this.formData = {columnName:'',tableData:[]} ;
      if (refresh){
        this.$emit('refresh')
      }
    },
  }
}
</script>

<style scoped>
.text-label{
  margin-right: 10px;font-size: 16px;color: #303745 ;width: 100px;text-align: right
}
</style>

